/**
 * Created by Delicate on 2018/1/3.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    ScrollView,
    TextInput,
    TouchableOpacity
} from 'react-native';

import NavBar from '../../components/NavBarView'
import Constants from '../../config/Constants'
import SystemService from '../../services/System'

let _self;

class Views extends React.Component {

    constructor(props) {
        super(props);
        _self = this;
        this.state = {
            formStatus: FormStatus.EDIT,
            succeed: false,
            form: {
                login_name: '',
                mobile_code: '',
                sugge_text: ''
            },
            sendNumber: '',
        }
        this.canSend = true;
        this.canSubmit = true;
        this.timer = null;
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        if(this.timer) clearInterval(this.timer);
    }

    onChangeText(key,text) {
        const form = _self.state.form;
        form[key] = text;
        _self.setState({
            form
        })
    }

    async send() {
        if(this.canSend){
            this.canSend = false;
            const {result, message} = await SystemService.businessSendCode({
                params: {
                    login_name: _self.state.form.login_name
                }
            });
            if(result) {
                let times = Constants.SMS_INTERVAL;
                Toast.show('发送成功');
                this.timer = setInterval(()=>{
                    times--;
                    if(times > 0){
                        _self.setState({
                            sendNumber: times + '秒'
                        })
                    }else{
                        //倒计时结束 恢复发送事件并清空sendText
                        _self.setState({
                            sendNumber: ''
                        })
                        this.canSend = true;
                    }
                },1000);
            }else {
                this.canSend = true;
                Toast.show(message)
            }
        }
    }



    async submit() {
        if(this.canSubmit) {
            this.canSubmit = false;
            const {result, message} = await SystemService.businessSubmit({
                params: this.state.form
            });
            this.canSubmit = true;
            if(result){
                Toast.show('提交成功')
                _self.props.navigation.goBack();
            }else{
                Toast.show(message)
            }
        }
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <NavBar
                    title='商务合作'
                    host={this}/>
                <Image
                    source={require('../../sources/image_business_bg.png')}
                    resizeMode={'cover'}
                    style={styles.outBg}>
                    <ScrollView style={styles.container}>
                        <View style={[base.rowCC, styles.topBox]}>
                            <Image style={styles.topIcon}
                                   source={require('../../sources/icon_business_robot.png')}/>
                            <Image style={styles.topIconPoint}
                                   source={require('../../sources/icon_business_point.png')}/>
                            <View style={styles.topTextBox}>
                                <Text allowFontScaling={false} style={styles.topText}>请留下您的合作意向及手机号码，我们将很快与您联系。</Text>
                            </View>
                        </View>
                        <Image
                            resizeMode={'cover'}
                            source={require('../../sources/image_business_card.png')}
                            style={styles.contentBox}>
                            <View style={[base.columnCC, styles.contentForm]}>
                                <View style={styles.formRow}>
                                    <Text allowFontScaling={false} style={styles.formTitle}>商务合作</Text>
                                </View>
                                <View style={[base.rowCC, styles.formInputBox]}>
                                    <Image
                                        source={require('../../sources/icon_passport_phone.png')}
                                        resizeMode={'contain'}
                                        style={styles.formInputIcon}/>
                                    <TextInput
                                        value={this.state.form.login_name}
                                        maxLength={11}
                                        onChangeText={(text)=>this.onChangeText('login_name',text)}
                                        keyboardType="phone-pad"
                                        autoCorrect={false}
                                        autoCapitalize="none"
                                        underlineColorAndroid="transparent"
                                        multiline={false}
                                        placeholder="手机号码"
                                        placeholderTextColor={layout.MAIN_COLOR}
                                        style={styles.formInput}/>
                                </View>
                                <View style={[base.rowCC, styles.formInputBox]}>
                                    <Image
                                        source={require('../../sources/icon_passport_valid.png')}
                                        resizeMode={'contain'}
                                        style={styles.formInputIcon}/>
                                    <TextInput
                                        value={this.state.form.mobile_code}
                                        maxLength={6}
                                        onChangeText={(text)=>this.onChangeText('mobile_code',text)}
                                        keyboardType="number-pad"
                                        autoCorrect={false}
                                        autoCapitalize="none"
                                        underlineColorAndroid="transparent"
                                        multiline={false}
                                        placeholder="验证码"
                                        placeholderTextColor={layout.MAIN_COLOR}
                                        style={styles.formInput}/>
                                    <TouchableOpacity
                                        onPress={()=>this.state.form.login_name.length === 11 ? this.send() : {}}
                                        activeOpacity={layout.TOUCH_OPACITY_ACTIVE}>
                                        <View style={[base.rowCC, styles.validBox, {
                                            backgroundColor: this.state.form.login_name.length === 11 && this.canSend ? layout.MAIN_COLOR : layout.DISABLED_COLOR
                                        }]}>
                                            <Text allowFontScaling={false} style={styles.validText}> {this.state.sendNumber || '获取验证码'} </Text>
                                        </View>
                                    </TouchableOpacity>
                                </View>
                                <View style={styles.formTextAreaBox}>
                                    <TextInput
                                        value={this.state.form.sugge_text}
                                        maxLength={100}
                                        onChangeText={(text)=>this.onChangeText('sugge_text',text)}
                                        autoCorrect={false}
                                        autoCapitalize="none"
                                        underlineColorAndroid="transparent"
                                        multiline={true}
                                        placeholder="请输入合作描述..."
                                        placeholderTextColor={layout.MAIN_COLOR}
                                        style={styles.formTextArea}/>
                                    <Text allowFontScaling={false} style={styles.formTextAreaTotal}>{this.state.form.sugge_text.length}/100</Text>
                                </View>
                                <View style={[base.rowCC, styles.btnBox]}>
                                    <TouchableOpacity
                                        style={styles.btnInner}
                                        onPress={()=>this.state.form.login_name && this.state.form.mobile_code && this.state.form.sugge_text ? this.submit() : {}}
                                        activeOpacity={layout.TOUCH_OPACITY_ACTIVE}>
                                        <View style={[base.rowCC, styles.btnInner, {
                                            backgroundColor: this.state.form.login_name && this.state.form.mobile_code && this.state.form.sugge_text ? layout.MAIN_COLOR : layout.DISABLED_COLOR
                                        }]}>
                                            <Text allowFontScaling={false} style={styles.btnText}>提交</Text>
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </Image>
                        <View style={[base.columnCC, styles.bottomBox]}>
                            <View style={[base.rowCC, styles.bottomInner]}>
                                <Image style={styles.bottomIcon}
                                       source={require('../../sources/icon_business_phone.png')}/>
                                <Text allowFontScaling={false} style={styles.bottomText}>咨询电话: {Constants.APP_CUSTOMER_TEL_VIEW}</Text>
                            </View>
                            <View style={[base.rowCC, styles.bottomInner]}>
                                <Image style={styles.bottomIcon}
                                       source={require('../../sources/icon_business_wechat.png')}/>
                                <Text allowFontScaling={false} style={styles.bottomText}>微信公众号: {Constants.APP_WE_CHAT_ID}</Text>
                            </View>
                        </View>
                    </ScrollView>
                </Image>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'transparent',

    },
    outBg: {
        flex: 1,
        width: layout.MAX_WIDTH,
    },
    topBox: {
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        paddingVertical: layout.height(52),
    },
    topIcon: {
        marginRight: layout.GAP_HORIZONTAL_MID,
        width: layout.width(84),
        height: layout.height(84),
    },
    topIconPoint: {
        width: layout.width(14),
        height: layout.height(13),
    },
    topTextBox: {
        width: layout.width(400),
        paddingHorizontal: layout.GAP_HORIZONTAL_MID,
        paddingVertical: layout.height(8),
        backgroundColor: layout.MAIN_COLOR,
        borderRadius: layout.width(12)
    },
    topText: {
        fontSize: layout.font(24),
        lineHeight: layout.heightToFixed(28),
        color: '#fff',
    },
    contentBox: {
        marginHorizontal: layout.width(36),
        width: layout.width(678),
        height: layout.height(752),
    },
    contentForm: {
        justifyContent: 'flex-start'
    },
    formRow: {
        paddingHorizontal: layout.width(72),
        paddingTop: layout.height(64),
        paddingBottom: layout.height(50)
    },
    formTitle: {
        color: layout.MAIN_COLOR,
        fontSize: layout.font(36),
    },
    formInputBox: {
        marginHorizontal: layout.width(80),
        marginBottom: layout.GAP_VERTICAL_MID,
        height: layout.height(90),
        backgroundColor: '#fff',
        borderRadius: layout.width(45)
    },
    formInputIcon: {
        margin: layout.width(28),
        width: layout.width(52),
        height: layout.height(52),
    },
    formInput: {
        flex: 1,
        fontSize: layout.font(28)
    },
    validBox: {
        marginHorizontal: layout.GAP_HORIZONTAL_MID,
        paddingVertical: layout.height(18),
        backgroundColor: layout.DISABLED_COLOR,
        borderRadius: layout.width(40),
    },
    validText: {
        fontSize: layout.font(20),
        color: '#fff',
        paddingHorizontal: layout.GAP_HORIZONTAL_MID,
        backgroundColor: 'transparent'
    },
    formTextAreaBox: {
        alignSelf: 'stretch',
        marginTop: layout.GAP_VERTICAL_SMALL,
        marginHorizontal: layout.width(80),
        height: layout.height(172),
        paddingHorizontal: layout.width(32),
        paddingVertical: layout.GAP_HORIZONTAL_MID,
        backgroundColor: '#fff',
        borderRadius: layout.width(28)
    },
    formTextArea: {
        flex: 1,
        alignSelf: 'stretch',
        fontSize: layout.font(28)
    },
    formTextAreaTotal: {
        paddingHorizontal: layout.GAP_HORIZONTAL_MID,
        fontSize: layout.font(24),
        color: layout.FORM_AUX_FONT_COLOR,
        textAlign: 'right',
        backgroundColor: 'transparent'
    },
    btnBox: {
        marginTop: layout.GAP_VERTICAL_SMALL,
        marginBottom: layout.GAP_VERTICAL_LARGE,
        paddingHorizontal: layout.height(112),
        paddingVertical: layout.GAP_VERTICAL_MID
    },
    btnInner: {
        flex: 1,
        height: layout.height(84),
        borderRadius: layout.width(45),
        backgroundColor: layout.DISABLED_COLOR
    },
    btnText: {
        color: '#fff',
        fontSize: layout.font(40)
    },
    bottomBox: {
        marginVertical: layout.height(60),
    },
    bottomInner: {
        paddingHorizontal: layout.width(32),
        paddingVertical: layout.GAP_VERTICAL_SMALL
    },
    bottomIcon: {
        width: layout.width(40),
        height: layout.height(40),
    },
    bottomText: {
        marginLeft: layout.GAP_HORIZONTAL_MID,
        fontSize: layout.font(20),
        color: layout.MAIN_COLOR
    },
})

//路由
const BusinessForm = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'BusinessForm',
    sign: false
};

export default BusinessForm;